<template>
  <div class="desc">
    <van-tabs v-model="active" line-width='0' @change="tabChange" sticky>
      <van-tab >
        <div slot="title">
          <van-icon name="location-o" v-if="isMe === 0"/>商品
        </div>
        <div class="goodsContent">
          <div class="swiper">
            <van-swipe :autoplay="3000" indicator-color="white">
              <van-swipe-item>
                <img src="https://img.yzcdn.cn/vant/t-thirt.jpg">
              </van-swipe-item>
              <van-swipe-item>
                <img src="https://h2.appsimg.com/a.appsimg.com/upload/merchandise/pdcvis/2019/10/17/102/8062f8b6-9556-4d32-b457-03b74155a993_420_531_304x384_80.jpg">
              </van-swipe-item>
            </van-swipe>
          </div>
          <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 7px' }"/>
          <van-row class="price">
            <van-col span="24">
              <span class="newPrice"><b>¥599</b></span> <s class="oldPrice">¥1999</s>
            </van-col>
          </van-row>
          <van-row class="title">
            <van-col span="24">
              <span class="titleText">李宁｜运动羽绒服男秋冬季节连帽保暖面包服男保暖加厚黑休闲外套男冬</span>
            </van-col>
          </van-row>
        </div>
      </van-tab>



      <van-tab >
        <div slot="title">
          <van-icon name="location-o" v-if="isMe === 1"/>详情
        </div>
        <div class="goodsContent">
          <van-list
            :finished="finished"
            finished-text="没有更多了"
          >
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
            <van-cell title="1"/>
          </van-list>
        </div>
      </van-tab>
    </van-tabs>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon" />
      <van-goods-action-button type="warning" text="加入购物车" @click="onClickButton" />
      <van-goods-action-button type="danger" text="立即购买" @click="onClickButton" />
    </van-goods-action>
  </div>
</template>

<script>
    export default {
        name: "Goodsdesc",
        data(){
            return {
                active:0,
                isMe:0,
                list: [],
                loading: false,
                finished: true,
            }
        },
        methods:{
            tabChange(name){
                this.isMe = name
            },
            onClickIcon() {
                alert(1)
            },
            onClickButton() {
                alert(2)
            }
        },
        mounted() {
            this.$event.$emit('show',false)
        },
        beforeRouteLeave(to,from,next){
            this.$event.$emit('show',true)
            next()
        }
    }
</script>

<style scoped>
  .swiper {
    height: 250px;
  }
  .swiper img {
    height: 250px;
  }
  .price {
    text-align: left;
    padding-left: 5px;
    color: black;
  }
  .oldPrice {
    font-size: 8px;
    color: black;
  }
  .title{
    padding-top: 5px;
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
    font-size: 10px;
    color: black;
  }
</style>
